<!--职务选择框-->
<template>
  <div>
    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="1100px"
      wrapClassName="j-user-select-modal" @ok="handleOk" destroyOnClose @visible-change="visibleChange">
      <a-row>
        <a-col :span="showSelected ? 18 : 24">
          <BasicTable :columns="columns" :bordered="true" :useSearchForm="true" :formConfig="formConfig"
            :api="getPositionList" :searchInfo="searchInfo" :rowSelection="rowSelection"
            :indexColumnProps="indexColumnProps" v-bind="getBindValue"></BasicTable>
        </a-col>
        <a-col :span="showSelected ? 6 : 0">
          <BasicTable v-bind="selectedTable" :dataSource="selectRows" :useSearchForm="true"
            :formConfig="{ showActionButtonGroup: false, baseRowStyle: { minHeight: '40px' } }">
            <!--操作栏-->
            <template #action="{ record }">
              <a href="javascript:void(0)" @click="handleDeleteSelected(record)">
                <Icon icon="ant-design:delete-outlined"></Icon>
              </a>
            </template>
          </BasicTable>
        </a-col>
      </a-row>
    </BasicModal>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { getPositionList } from '/@/api/common/api';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
import { useAttrs } from '/@/hooks/core/useAttrs';
import { selectProps } from '/@/components/Form/src/jeecg/props/props';

export default defineComponent({
  name: 'PositionSelectModal',
  components: {
    //此处需要异步加载BasicTable
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      loading: true,
    }),
  },
  props: {
    ...selectProps,
    //选择框标题
    modalTitle: {
      type: String,
      default: '职务选择',
    },
  },
  emits: ['register', 'getSelectResult'],
  setup(props, { emit, refs }) {
    //注册弹框
    const [register, { closeModal }] = useModalInner();
    const attrs = useAttrs();
    //表格配置
    const config = {
      canResize: false,
      bordered: true,
      size: 'small',
      //改成读取rowKey,自定义传递参数
      rowKey: props.rowKey,
    };
    const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
    const [{ rowSelection, visibleChange, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
      getPositionList,
      getBindValue
    );
    const searchInfo = ref(props.params);
    //查询form
    const formConfig = {
      labelCol: {
        span: 4,
      },
      baseColProps: {
        xs: 24,
        sm: 10,
        md: 10,
        lg: 10,
        xl: 10,
        xxl: 10,
      },
      //update-begin-author:liusq date:2023-10-30 for: [issues/5514]组件页面显示错位
      actionColOptions: {
        xs: 24,
        sm: 8,
        md: 8,
        lg: 8,
        xl: 8,
        xxl: 8,
      },
      //update-end-author:liusq date:2023-10-30 for: [issues/5514]组件页面显示错位
      schemas: [
        {
          label: '职务名称',
          field: 'name',
          component: 'JInput',
          colProps: { span: 10 },
        },
      ],
    };
    //定义表格列
    const columns = [
      // {
      //   title: '职务编码',
      //   dataIndex: 'code',
      //   width: 180,
      //   align: 'left',
      // },
      {
        title: '职务名称',
        dataIndex: 'name',
        width: 180,
      },
      {
        title: '职级',
        dataIndex: 'positionFlag',
        width: 100,
        customRender: ({ text }) => {
          return text === 1 ? '正职级' : text === 2 ? '副职级' : text === 0 ? '无职级' : '';
        },
      },
      {
        title: '是否占员额',
        dataIndex: 'memberFlag',
        width: 100,
        customRender: ({ text }) => {
          return text === 1 ? '是' : text === 0 ? '否' : '';
        },
      },
      // {
      //   title: '职务等级',
      //   dataIndex: 'postRank_dictText',
      //   width: 180,
      // },
    ];
    //已选择的table信息
    const selectedTable = {
      pagination: false,
      showIndexColumn: false,
      scroll: { y: 390 },
      size: 'small',
      canResize: false,
      bordered: true,
      rowKey: 'id',
      columns: [
        {
          title: '职务名称',
          dataIndex: 'name',
          width: 40,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 40,
          slots: { customRender: 'action' },
        },
      ],
    };
    /**
     * 确定选择
     */
    function handleOk() {
      getSelectResult((options, values) => {
        //回传选项和已选择的值
        emit('getSelectResult', options, values);
        //关闭弹窗
        closeModal();
      });
    }
    return {
      handleOk,
      getPositionList,
      register,
      visibleChange,
      getBindValue,
      formConfig,
      indexColumnProps,
      columns,
      rowSelection,

      selectedTable,
      selectRows,
      handleDeleteSelected,
      searchInfo,
    };
  },
});
</script>
